html,body,p,h1,h2,h3,h4,h5,h6{
    margin: 0;
}

body{
    background-color: #f5f5f5;
}

a{
    text-decoration: none;
}

input{
    border: none;
    outline: 0;
}

#app {
    font-family: 'MicrosoftYaHei', 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
    line-height: 24px;
}

.bg{
    width: 100%;
    min-width: 1200px;
}

.container{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.not-visible{
    visibility: hidden;
}

.clear{
    clear: both;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    //will-change: transform;
    transition: all 0.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    position: absolute; //这里的定位使用relative可以解决切换时页面残影
}
.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}
.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}